<!-- 用户升级 -->
<template>
  <div class="page">
    <el-container>
      <el-header>
        <h2>企业用户注册认证</h2>
      </el-header>
      <el-link :underline="true"
               type="primary"
               class="a"
               @click="gobackRegister">返回用户注册</el-link>
      <div class="steps">
        <el-steps :active="active"
                  finish-status="success"
                  process-status="finish"
                  align-center>
          <el-step title="法人认证"></el-step>
          <el-step title="公司信息认证"></el-step>
          <el-step title="业务信息认证"></el-step>
          <el-step title="完成"></el-step>
        </el-steps>
      </div>
      <div style="width:200px,height:200px;margin:20px auto;border:2px solid red">
        <img :src="testurl"
             alt="">
      </div>
      <el-main>
        <el-form v-show="active == 0"
                 :model="userinfo"
                 :rules="rules"
                 label-width="93px">
          <el-form-item label="法人姓名"
                        prop="company_user">
            <el-input v-model="userinfo.company_user"
                      placeholder="请输入法人姓名"
                      clearable></el-input>
          </el-form-item>
          <el-form-item label="联系电话"
                        prop="company_user_iphone">
            <el-input v-model="userinfo.company_user_iphone"
                      placeholder="请输入电话号码"
                      clearable></el-input>
          </el-form-item>
          <el-form-item label="证件号码"
                        prop="company_user_id">
            <el-input v-model="userinfo.company_user_id"
                      placeholder="请输入证件号码"
                      clearable></el-input>
          </el-form-item>
          <el-form-item label="上传证件"
                        prop="company_user_idimg"
                        style="height:160px">
            <div class="img">
              <el-upload action="#"
                         list-type="picture-card"
                         :on-change="handleChange"
                         :limit="2"
                         :class="{disabled:'true'}"
                         :file-list="fileList"
                         :auto-upload="false">
                <i slot="default"
                   class="el-icon-plus"></i>
                <div slot="file"
                     slot-scope="{file}">
                  <img class="el-upload-list__item-thumbnail"
                       :src="file.url"
                       alt="">
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview"
                          @click="handlePictureCardPreview(file)">
                      <i class="el-icon-zoom-in"></i>
                    </span>
                    <!-- <span
                        v-if="!disabled"
                        class="el-upload-list__item-delete"
                        @click="handleDownload(file)"
                      >
                        <i class="el-icon-download"></i>
                      </span> -->
                    <span v-if="!disabled"
                          class="el-upload-list__item-delete"
                          @click="handleRemove(file)">
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%"
                     :src="dialogImageUrl"
                     alt="">
              </el-dialog>
            </div>
            <!-- <div class="imgSpan2">只能上传jpg/png文件</div> -->
          </el-form-item>
        </el-form>

        <el-form v-show="active == 1"
                 ref="registerForm"
                 :model="userinfo"
                 :rules="rules"
                 label-width="93px">
          <el-form-item label="企业名称"
                        prop="company_name">
            <el-input v-model="userinfo.company_name"
                      placeholder="请输入企业全称"
                      clearable></el-input>
          </el-form-item>
          <el-form-item label="联系电话"
                        prop="company_iphone">
            <el-input v-model="userinfo.company_iphone"
                      placeholder="请输入联系电话"
                      clearable></el-input>
          </el-form-item>
          <!-- <el-progress :percentage="100" :format="format"></el-progress> -->
          <el-form-item label="企业地址"
                        prop="company_address">
            <el-input v-model="userinfo.company_address"
                      placeholder="请输入地址"
                      clearable></el-input>
          </el-form-item>
          <el-form-item label="社会统一编码"
                        prop="company_idnumber">
            <el-input v-model="userinfo.company_idnumber"
                      placeholder="请输入社会统一编码"
                      clearable></el-input>
          </el-form-item>
          <el-form-item label="营业执照"
                        prop="company_idimg"
                        style="height:160px">
            <div class="img">
              <el-upload action="#"
                         list-type="picture-card"
                         :on-change="handleChange2"
                         :limit="1"
                         :file-list="fileList2"
                         :auto-upload="false">
                <i slot="default"
                   class="el-icon-plus"></i>
                <div slot="file"
                     slot-scope="{file}">
                  <img class="el-upload-list__item-thumbnail"
                       :src="file.url"
                       alt="">
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview"
                          @click="handlePictureCardPreview(file)">
                      <i class="el-icon-zoom-in"></i>
                    </span>
                    <!-- <span
                        v-if="!disabled"
                        class="el-upload-list__item-delete"
                        @click="handleDownload(file)"
                      >
                        <i class="el-icon-download"></i>
                      </span> -->
                    <span v-if="!disabled"
                          class="el-upload-list__item-delete"
                          @click="handleRemove2(file)">
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%"
                     :src="dialogImageUrl"
                     alt="">
              </el-dialog>
            </div>
            <!-- <div class="imgSpan2">只能上传jpg/png文件</div> -->
          </el-form-item>
        </el-form>

        <el-form v-show="active == 2"
                 ref="registerForm"
                 :model="userinfo"
                 :rules="rules"
                 label-width="93px">
          <el-form-item label="业务人"
                        prop="company_finance_user">
            <el-input v-model="userinfo.company_finance_user"
                      placeholder="请输入业务人姓名"
                      clearable></el-input>
          </el-form-item>
          <el-form-item label="传真"
                        prop="company_fax">
            <el-input v-model="userinfo.company_fax"
                      placeholder="请输入传真电话"
                      clearable></el-input>
          </el-form-item>
          <el-form-item label="企业邮箱"
                        prop="company_email">
            <el-input v-model="userinfo.company_email"
                      placeholder="请输入电子邮箱"
                      clearable></el-input>
          </el-form-item>
        </el-form>
        <el-result v-show="active == 3 && submitState == 0"
                   icon="info"
                   title="等待提交"
                   subTitle="请确认信息无误后点击提交">
        </el-result>
        <el-result v-show="active == 3 && submitState == 1"
                   icon="success"
                   title="等待管理员审核成功"
                   subTitle="欢迎企业加入">
        </el-result>
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-button v-if="active === 0"
                         @click="gobackRegister">取消</el-button>
              <el-button v-if="active > 0"
                         @click="back('registerForm')">上一步</el-button>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-button v-if="active <= 2"
                         type="primary"
                         @click="next('registerForm')">下一步</el-button>
              <el-button v-if="active > 2 && submitState == 0"
                         type="primary"
                         @click="onSubmit('registerForm')">确认提交</el-button>
              <el-button v-if="active > 2 && submitState == 1"
                         type="primary"
                         @click="gotologin">返回登录</el-button>
            </div>
          </el-col>
        </el-row>
      </el-main>

    </el-container>
  </div>
</template>

<script>
export default {
  name: 'usersUp',
  data () {
    return {
      testurl: '',
      // 放大效果图
      dialogImageUrl: '',
      dialogVisible: false,
      // 禁用隐藏下载删除
      disabled: false,
      // 暂存图片列表
      fileList: [],
      fileList2: [],

      test: {
        tempUrl: [],
        testdata: '2'
      },
      // 确认提交
      submitState: 0,
      // 步骤
      active: 0,
      imageUrl: '',

      userinfo: {
        company_user: '',
        company_user_iphone: '',
        company_user_id: '',
        // company_user_idimg: '',
        company_user_idimg: [],
        // dialogImageUrl: '',
        company_name: '',
        company_finance_user: '',
        company_address: '',
        company_idnumber: '',
        company_idimg: '',
        company_fax: '',
        company_iphone: '',
        company_email: '',
        // 索引
        users_id: this.$store.getters.userinfo.users_id,
        isuserup: ''
      },
      rules: {
        // 第一步
        company_user: [
          { required: true, message: '请输入法人姓名', trigger: 'blur' },
          { min: 3, max: 12, message: '长度在 2 到 15 个字符', trigger: 'blur' }
        ],
        company_user_iphone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { min: 10, max: 11, message: '手机号码有误', trigger: 'blur' }
        ],
        company_user_id: [
          { required: true, message: '请输入身份证号码', trigger: 'blur' },
          { min: 15, max: 18, message: '身份证号码有误', trigger: 'blur' }
        ],
        company_user_idimg: [
          { required: true, message: '请上传身份证原件图片', trigger: 'blur' }
        ],
        // 第二步
        company_name: [
          { required: true, message: '请输入公司名称', trigger: 'blur' }
        ],
        company_finance_user: [
          { required: true, message: '请输入公司法人姓名', trigger: 'blur' }
        ],
        company_address: [
          { required: true, message: '请输入公司地址', trigger: 'blur' }
        ],
        company_idnumber: [
          { required: true, message: '请输入营业编号', trigger: 'blur' }
        ],
        company_idimg: [
          { required: true, message: '请上传企业营业执照', trigger: 'blur' }
        ],
        // 第三步
        company_fax: [
          { required: true, message: '请输入传真电话', trigger: 'blur' },
          // { min: 5, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
        ],
        // checkPassword: [
        //   { required: true, message: '请再次输入密码确认', trigger: 'blur' },
        //   { min: 5, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' },
        //   { validator: validatePass2, trigger: 'blur' }
        // ],
        company_iphone: [
          { required: true, message: '请输入电话号码', trigger: 'blur' }
        ],
        company_email: [
          { required: true, message: '请输入电子邮箱地址', trigger: 'blur' }
        ]
      }
    }
  },
  created () {

  },
  methods: {
    // 控制步骤
    // next () {
    //   if (this.active++ > 2) this.active = 0
    // },
    // 删除
    handleRemove (file) {
      console.log('删除当前图片', file);
      // console.log(this.fileList)
      for (let i = 0; i < this.fileList.length; i++) {
        if (this.fileList[i].uid === file.uid) {
          this.fileList.splice(i, 1)
        }
      }
      // console.log('删除后：',this.fileList)
    },
    handleRemove2 (file) {
      console.log('删除当前图片', file);
      // console.log(this.fileList2)
      for (let i = 0; i < this.fileList2.length; i++) {
        if (this.fileList2[i].uid === file.uid) {
          this.fileList2.splice(i, 1)
        }
      }
      // console.log('删除后：',this.fileList2)
    },
    // 放大
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 下载
    // handleDownload(file) {
    //   console.log('下载',file);
    // },

    // 保存法人图片
    handleChange (file, fileList) {
      console.log('修改了', file, fileList)
      this.fileList = fileList
      this.userinfo.company_user_idimg = fileList
      // this.testfun(fileList)
    },
    handleChange2 (file, fileList) {
      console.log('修改了', file)
      this.userinfo.company_idimg = file.url
      // this.testfun(fileList)
    },
    gobackRegister () {
      this.$router.push('/myinfo')
    },
    gotologin () {
      this.$router.push('/')
    },
    back () {
      this.active--
    },
    next (formName) {
      // 控制步骤
      if (this.active++ > 2) this.active = 0
      // console.log('---', this.active)
      // console.log(formName)
      console.log(this.userinfo)
    },
    onSubmit () {
      // 修改submit状态值
      this.submitState = 1
      this.userinfo.isuserup = 1
      // 处理图片
      const imglist = [];
      for (let i = 0; i < this.userinfo.company_user_idimg.length; i++) {
        imglist.push(this.userinfo.company_user_idimg[i].url);
      }
      this.userinfo.company_user_idimg = imglist.toString()
      console.log('提交表单', this.userinfo)
      const api = '/userup'
      // console.log('发送url',url)
      // this.test.tempUrl = url
      // this.test.testdata = '1'
      this.$axios.post(api, this.userinfo)
        .then(res => {
          console.log(res)
        })
        .catch(err => {
          console.log(err)
        })
    },

    testfun (url) {
      const api = '/testurl'
      console.log('发送url', url)
      this.test.tempUrl = url
      this.test.testdata = '1'
      this.$axios.post(api, this.test)
        .then(res => {
          console.log(res)
        })
        .catch(err => {
          console.log(err)
        })


    },
    // geturl(){
    //   const api = `geturl`
    //   this.$axios.get(api)
    //     .then(res => {
    //       console.log('获取url',res.data[0].name)
    //       this.testurl = res.data[0].name
    //     })
    //     .catch(err => {
    //       console.log(err)
    //     })     
    // }

    // handleAvatarSuccess (res, file) {
    //   this.imageUrl = URL.createObjectURL(file.raw)
    // },
    // beforeAvatarUpload (file) {
    //   const isJPG = file.type === 'image/jpeg'
    //   const isLt2M = file.size / 1024 / 1024 < 2

    //   if (!isJPG) {
    //     this.$message.error('上传头像图片只能是 JPG 格式!')
    //   }
    //   if (!isLt2M) {
    //     this.$message.error('上传头像图片大小不能超过 2MB!')
    //   }
    //   return isJPG && isLt2M
    // },
    // image () {

    // }
    // // 删除图片
    // handleRemove (file, fileList) {
    //   console.log(file)
    //   this.uploadDisabled = false
    // },
    // // 上传中(放大)
    // handlePictureCardPreview (file) {
    //   console.log('上传中',file)

    //   // "blob:http://localhost:8888/7c2eabdc-f97b-4ec2-8743-640bbada78c5"
    //   this.userinfo.dialogImageUrl = file.url
    //   this.dialogVisible = true
    //   this.uploadDisabled = true
    // },
    // // 上传成功
    // handleUploadSuccess (file) {
    //   this.userinfo.dialogImageUrl = file.result // 专区logoId
    //   this.uploadDisabled = true
    //   console.log('图片路径',this.userinfo.dialogImageUrl,file)
    // },
    // // 下载
    // handleDownload (file, fileList) {
    //   console.log(file)
    //   this.uploadDisabled = false
    // },
    // 到达限定则不渲染加号
    // handleChange (file, fileList) {
    //   console.log('、、、', fileList)
    //   if (fileList.length >= 2) {
    //     console.log('666')
    //     this.disabled = true
    //   }
    // },
  }
}
</script>

<style  scoped>
.page {
  height: 100%;
  width: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url("../assets/img/userup2.png");
  position: fixed;
}
.el-header h2 {
  margin-top: 50px;
  font-size: 20px;
  font-weight: bold;
  /* // word-spacing:20px; */
  /* // text-shadow: #8c939d; */
  color: rgb(77, 139, 253);
  text-align: center;
}
.a {
  width: 120px;
  font-size: 17px;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 1100px;
}
.a:hover {
  font-size: 18px;
  font-weight: bold;
  color: rgb(77, 139, 253);
  /* // border: 2px solid rgb(77,139 ,253 ); */
}
.steps {
  width: 1000px;
  height: 120px;
  padding-top: 20px;
  border: black;
  margin: auto;
}
.el-header {
  margin-top: 1.875rem;
  margin-bottom: 1.875rem;
}
.el-main {
  width: 50rem;
  margin: auto;
  background-color: rgba(251, 251, 251, 0.9);
  margin-bottom: 3.125rem;
  border-radius: 2%;
  box-shadow: 0.0625rem 0.0625rem 0.1875rem rgb(50, 50, 50, 0.8);
  /* text-align: center; */
}
.el-col-12 {
  text-align: center;
}
.el-form-item {
  margin-bottom: 18px;
}
.img {
  overflow: hidden;
}
.imgSpan2 {
  text-align: center;

  padding-right: 100px;
  margin-top: -8px;
}
/* // 加穿透强制修改element底层组件的样式，应为有一些组件的样式不加穿透是无效的
// ::v-deep .el-main {
//   width: 25rem;
//   margin: auto;
//   background-color: rgba(251, 251, 251, 0.9);
//   margin-bottom: 3.125rem;
//   border-radius: 2%;
//   box-shadow: 0.0625rem 0.0625rem 0.1875rem rgb(50, 50, 50, 0.8);
// } */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 130px;
  height: 100px;
  display: block;
}
</style>
